import styles from './index.module.less'
import { useNavigate, useParams, useLocation, Link } from 'react-router-dom'
import { Button } from 'antd'
import { useState } from 'react'
import { Outlet } from 'react-router-dom'
import React from 'react'

const Home = () => {
  const navigate = useNavigate()
  const params = useParams()
  console.log('🚀 ~ file: index.tsx ~ line 10 ~ Home ~ params', params) // { *: "home" }
  const location = useLocation()
  console.log('🚀 ~ file: index.tsx ~ line 14 ~ Home ~ location', location)

  // {
  //   pathname: "/home",
  //   search: "?id=5",
  //   hash: "",
  //   state: {
  //     name: "amin"
  //   },
  //   key: "ns4b6nn3"
  // }

  const [count, setCount] = useState<number>(0)

  const toHome = () => {
    navigate('/note', { state: { name: 'zf' } })
  }

  return (
    <div className={styles.homeContainer}>
      <div>
        <Button onClick={toHome}>to Note</Button>
        <Link to={'/note'}>to Note</Link>
      </div>
      <div>Home</div>
      <div>Parent Count: {count}</div>

      <Outlet context={[count, setCount]}></Outlet>
    </div>
  )
}

export default Home
